<template>
	<view class="search_store">
		<view class="search_title">
			<i-search style="width: 100%;" margin="0" bgColor="#F2F2F7" v-model="keywords" placeholder="输入门店名称搜索"
				width="340rpx"></i-search>
			<text @click="searchStore" class="search">搜索</text>
		</view>
		<view class="buttons">
			<i-buttons color="#1C1C1E" padding="16rpx 64rpx" radius="40" @click="toMap">手动定位</i-buttons>
		</view>
		<i-scrollList height="82vh" :total="list.length" :pageTotal="list.length">
			<view class="store_item" v-for="item in list" :key="item.storeId" @click="selectItem(item)">
				<view class="location">
					<image src="../../static/images/location_icon.png" mode=""></image>
				</view>
				<view class="store_r">
					<text class="title">{{item.storeName}}</text>
					<text>{{item.address}}</text>
					<text>距您 {{item.distance || 0.01}}km</text>
				</view>
			</view>
		</i-scrollList>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref
	} from 'vue';
	import useStore from '../../stores/index'
	import {
		searchStoresByKeywords
	} from '../../api/shopping'
	import {
		showTost,
		getAppQX
	} from '../../utils/common'

	const keywords = ref('')
	const latitude = ref('')
	const longitude = ref('')

	const list = ref<any>([])

	const store = useStore()

	const searchStore = async () => {
		const {
			data
		} = await searchStoresByKeywords({
			keywords: keywords.value,
			latitude: latitude.value,
			longitude: longitude.value,
			limit: 10
		})
		list.value = data
		if (!list.value.length) {
			showTost('未搜索到匹配的门店')
		}
	}
	const selectItem = (item : any) => {
		uni.$emit('changeStore', item)
		uni.navigateBack()
	}
	const toMap = () => {
		if (getAppQX('locationAuthorized')) {
			uni.chooseLocation({
				success: (res) => {
					latitude.value = res.latitude + ''
					longitude.value = res.longitude + ''
					searchStore()
				},
				fail: (err) => {
					console.log(err, 'errerr');
				}
			});
		}
	}
	onLoad(() => {
		uni.getLocation({
			geocode: true,
			success: (res) => {
				store.setLocation({
					longitude: res.longitude,
					latitude: res.latitude,
					address: res.address || '',
				})
				latitude.value = res.latitude + ''
				longitude.value = res.longitude + ''
				searchStore()
			},
			fail: (err) => {
				console.log(err, 'errerr');
			},
			complete: () => {
			}
		});
	})
</script>

<style lang="scss" scoped>
	.search_store {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.search_title {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;

			.search {
				@include titlefont(28rpx);
				margin-left: 32rpx;
			}
		}

		.buttons {
			margin: 20rpx 0;
			@include flexCC;
		}

		.store_item {
			width: calc(100% - 64rpx);
			padding: 40rpx 0;
			margin: 0 auto;
			@include flexR;
			border-bottom: 1rpx solid #F2F2F7;

			.location {
				width: 48rpx;
				height: 48rpx;
				@include flexRC;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.store_r {
				margin-left: 28rpx;
				@include flexC;

				text {
					@include dfont(26rpx);
					color: #999999;
					margin-bottom: 8rpx;
				}

				.title {
					@include titlefont(32rpx);
				}
			}
		}

	}
</style>